<!DOCTYPE html>
<html>
<body>
<h1>Chat</h1>
<div id="chat"></div>
<input id="msg" type="text">
<style>
input { border: 1px solid green; }
</style>
<script>

  const CHAR_RETURN = 13;

  const socket = new WebSocket('ws://127.0.0.1:8000/chat');
  const chat = document.getElementById('chat');
  const msg = document.getElementById('msg');
  msg.focus();

  const writeLine = text => {
    const line = document.createElement('div');
    line.innerHTML = `<p>${text}</p>`;
    chat.appendChild(line);
  };

  socket.onopen = () => {
    writeLine('connected');
  };

  socket.onclose = () => {
    writeLine('closed');
  };

  socket.onmessage = event => {
    writeLine(event.data);
  };

  msg.addEventListener('keydown', event => {
    if (event.keyCode === CHAR_RETURN) {
      const s = msg.value;
      msg.value = '';
      writeLine(s);
      socket.send(s);
    }
  });

</script>
</body>
</html>
